{extend name="../template/admin/base.html" /}
{block name="index_right"}
<ul class="nav nav-tabs" role="tablist">
    <li ><a href="{:url('admin/slide/index')}">轮播图列表</a></li>
    <li class="active"><a href="{:url('admin/slide/post')}">轮播图添加</a></li>
</ul>


<form action="" method="POST" class="form-horizontal" role="form">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">轮播图管理</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">轮播图标题</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="slide_title" value="{$model['slide_title']}">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">轮播图跳转地址</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="slide_url" value="{$model['slide_url']}">
                </div>
            </div>



            <div class="form-group">
                <label for="" class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control" name="slide_img" readonly=""
                               value="{$model['slide_img']}">
                        <div class="input-group-btn">
                            <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                        </div>
                    </div>
                    <span class="help-block">请上传 1903px * 448px </span>
                    <div class="input-group" style="margin-top:5px;">
                        <?php if($model['slide_img']!=''){ ?>


                        <img src="<?php echo $model['slide_img'] ?>" class="img-responsive img-thumbnail" width="150" style="width: 100px;">

                        <?php } else{ ?>
                        <img src="__STATIC__/images/nopic.jpg" class="img-responsive img-thumbnail" width="150"
                             style="width: 100px">

                        <?php } ?>
                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
                            onclick="removeImg(this)">x</em>
                    </div>
                </div>
            </div>



            <div class="form-group">
                <label for="" class="col-sm-2 control-label">轮播图排序</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="slide_sort" value="{$model['slide_sort']}">
                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary">提交</button>
</form>

<script>
    //上传图片
    function upImage(obj) {
        require(['util'], function (util) {
            options = {
                multiple: false,//是否允许多图上传
                //data是向后台服务器提交的POST数据
                data: {name: '后盾人', year: 2099},
            };
            util.image(function (images) {          //上传成功的图片，数组类型

                $("[name='slide_img']").val(images[0]);
                $(".img-thumbnail").attr('src', images[0]);
            }, options)
        });
    }

    //移除图片
    function removeImg(obj) {
        $(obj).prev('img').attr('src', '__STATIC__/images/nopic.jpg');
        $(obj).parent().prev().find('input').val('');
    }
</script>

{/block}